<!-- 案件管理-非合规人员 -->
<template>
    <div class="page">
        <div class="uncompliant-head">
            <!-- <Title></Title> -->
            <div class="search">
                <van-search class="cus-search" v-model="keyword" background="#3975C6" shape="round"
                    placeholder="请输入违规事项或违规内容关键字">
                </van-search>
                <van-dropdown-menu direction="up" class="dropdown-menu">
                    <van-dropdown-item ref="typeRef">
                        <template #title>
                            <span>{{ fxfsValue || '发现方式' }}</span>
                            <img src="@/assets/img/arrow-down.png" alt="">
                        </template>
                        <van-picker title="请选择发现方式" show-toolbar :columns="typeList" @confirm="onTypeSure"
                            @cancel="onTypeCancel" />
                    </van-dropdown-item>
                    <van-dropdown-item ref="yearRef">
                        <template #title>
                            <span>{{ qbndValue || '全部年度' }}</span>
                            <img src="@/assets/img/arrow-down.png" alt="">
                        </template>
                        <van-picker title="请选择年度年份" show-toolbar :columns="years" :default-index="defaultYearIndex"
                            @confirm="onSureYear" @cancel="onCancelYear" />
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
        </div>

        <!-- <van-loading size="24px" style="position: relative;top: 3%;" v-if="listLoading" vertical>
      加载中...v-else
    </van-loading> -->
        <div class="tabs-list">
            <van-list v-if="caseList.length > 0" v-model="listLoading" :finished="finished"
                :finished-text="this.searchQry.pagenum > 1 ? '到底了' : ''" @load="onLoad">
                <div class="item" v-for="item in caseList" :key="item.id" @click="openDetail(item)">
                    <div class="item-info">
                        <div class="info-name">{{ item.METHOD || '-' }}({{ item.YEAR || '-' }}年度)</div>
                        <div class="info-status">
                            <!-- 0未学1期限内完成2超期完成，文字是只区分里未学和已学 -->
                            <span v-if="item.STATUS_CODE == 2" class="stu1">过期</span>
                            <span v-else-if="item.STATUS_CODE == 1" class="stu2">已学</span>
                            <span v-else-if="item.STATUS_CODE == 0" class="stu3">未学</span>
                            <!-- <span v-else class="stu4">已答题：<span>90分</span></span> -->
                        </div>
                    </div>
                    <div class="info-con">
                        <p class="row"><span class="row-tit">违规事项</span><span class="con-col">{{ item.CONTENT || '-'
                                }}</span></p>
                        <p class="row"><span class="row-tit">违规内容</span><span class="con-col">{{ item.DESCRIPTION || '-'
                                }}</span>
                        </p>
                    </div>
                    <van-divider :style="{ color: '#1989fa', borderColor: '#DEDEDE' }">
                    </van-divider>
                    <div class="item-ops">
                        <span class="name">派发人：{{ item.EMPE_NM || '-' }}</span>
                        <span class="name">派发时间：{{ item.SEND_TM || '-' }}</span>
                        <van-button type="info" size="small" v-if="item.STATUS_CODE != 1">去学习</van-button>
                    </div>
                </div>
            </van-list>
            <van-empty v-else description="暂无数据" />
        </div>

    </div>
</template>

<script>
import { getCaseData } from '@/api/case'
import Title from '@/components/commonTitle.vue'
export default {
    name: 'caseUncompliant',
    components: { Title, },
    data() {
        return {
            years: [],
            defaultYearIndex: 2,
            typeList: [], //发现方式
            listLoading: true,
            finished: false,
            caseList: [],
            searchQry: {
                code: '80308',
                pagenum: 0,
                pagesize: 10,
                // sortdatafield,
                // sortorder,
            },
            qrydata: {
                NUM_TYPE: 1, // 固定值 1查询、2学习
                VAR_METHOD: '',//	发现方式	
                VAR_YEAR: new Date().getFullYear(),//	发现年度	yyyy
                VAR_PROBLEM: '', //违规事项	
                VAR_PROBLEMDESC: '', //违规内容	
                // VAR_DESCRIPTION: '', //违规内容	
                VAR_TASK_FROM: '',	//任务开始日期 	
                VAR_TASK_TO: '',	//任务截至日期  	
                NUM_OVERDUE: '',	//是否超期	1是, 0否, 空值代表全部
            },
            fxfsValue: '',
            qbndValue: new Date().getFullYear(),

            showPop: false,
            keyword: "",
            active: 'all',
            value1: 0,
            value2: 0,
            timer: null
        }
    },
    watch: {
        keyword(val) {
            if (this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
                this.searchQry.pagesize = 10	//每页条数	Y	
                this.caseList = []
                if (!val) {
                    this.listLoading = true
                    this.finished = false
                    this.qrydata.VAR_PROBLEMDESC = ''
                } else {
                    this.qrydata.VAR_PROBLEMDESC = val
                }
                this.getDataList()
            }, 1000)
        },
        '$route'(val) {
            if (val.path == '/') {
                this.caseList = []
                this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
                this.searchQry.pagesize = 10	//每页条数	Y	
                this.getDataList()
            }
        }
    },
    created() {
        this.getYear()
        this.getQryFxfsList()
        this.getDataList()
    },
    methods: {
        getYear() {
            const currentYear = new Date().getFullYear();
            for (let i = 1990; i <= currentYear + 50; i++) {
                this.years.push(i);
            }
            this.years.unshift('全部')
            let index = this.years.findIndex(item => item == new Date().getFullYear())
            this.defaultYearIndex = index
        },
        onSureYear(val) {
            this.qrydata.VAR_YEAR = val == '全部' ? '' : val
            this.qbndValue = val == '全部' ? '全部年度' : val
            this.caseList = []
            this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
            this.searchQry.pagesize = 10	//每页条数	Y	
            this.getDataList()
            this.$refs.yearRef.toggle();
        },
        onCancelYear() {
            this.$refs.yearRef.toggle();
        },
        // 获取发现方式
        async getQryFxfsList() {
            const resData = await getCaseData({ code: '80304' })
            if (!resData || !resData.data || !resData.data.VALUE_LIST) return
            this.typeList = resData.data.VALUE_LIST
            this.typeList = this.typeList.map(item => {
                item.text = item.NAME
                return { ...item }
            })
            this.typeList.unshift({ ID: '', NAME: '全部', text: '全部' })
        },
        // 获取非合规人员列表
        async getDataList() {
            let qry = {
                ...this.searchQry,
                params: JSON.stringify(this.qrydata)
            }
            const resData = await getCaseData(qry)
            this.listLoading = false
            if (!resData || !resData.data || !resData.data.VALUE_LIST) return
            this.caseList = [...this.caseList, ...resData.data.VALUE_LIST]
            if (resData.data.VALUE_LIST.length < this.searchQry.pagesize) {
                this.finished = true
            }
        },
        onLoad() {
            this.searchQry.pagenum += 1
            this.getDataList()
        },
        onTypeSure(value, index) {
            this.qrydata.VAR_METHOD = this.typeList[index].ID
            this.fxfsValue = this.typeList[index].ID ? this.typeList[index].text : '发现方式'
            this.caseList = []
            this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
            this.searchQry.pagesize = 10	//每页条数	Y	
            this.getDataList()
            this.$refs.typeRef.toggle();
        },
        onTypeCancel() {
            this.$refs.typeRef.toggle();
        },
        openDetail(rowdata) {
            this.$router.push({
                path: '/uncompCaseInfo',
                query: {
                    // id: rowdata.ID,
                    // type: 2, // 非合规
                    rowdata: JSON.stringify(rowdata)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    height: 100%;

    .uncompliant-head {
        height: 180px;
        background: #3875c6;
        display: flex;
        flex-direction: column;
        justify-content: center;

        /deep/ .search {
            height: 156px;

            .cus-search {
                // height: 112px;
                padding-top: 0;
                padding-bottom: 0;
            }

            .van-search__content {
                height: 60px;

                .van-field {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .van-field__body {
                        height: 100%;
                    }
                }
            }
        }

        /deep/ .dropdown-menu {

            .van-dropdown-item--up {
                bottom: 0 !important;
                z-index: 999;
            }

            .van-dropdown-menu__bar {
                background: #3875c6;

            }

            .van-dropdown-menu__title {
                color: #fff;
                padding: 0;
                font-size: 28px;
                line-height: 42px;
                font-family: SourceHanSansCN, SourceHanSansCN;

                &::after {
                    display: none;
                }

                .van-ellipsis {
                    display: flex;
                    align-items: center;
                    font-size: 28px;

                    span {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    img {
                        width: 28px;
                        height: 28px;
                    }
                }
            }

            .van-dropdown-menu__title--active {
                color: #fff;
            }
        }
    }


    /deep/ .tabs {

        .van-tabs__wrap {
            height: 116px;

        }

        .van-tabs__nav--line {
            padding-bottom: 12px;
        }
    }

    .tabs-list {
        height: calc(100% - 180px);
        overflow: auto;

        .item {
            padding: 40px 30px;
            margin-top: 20px;
            background: #fff;
            cursor: pointer;

            .item-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .info-name {
                    font-size: 28px;
                    font-weight: 500;
                    line-height: 42px;
                    color: #333
                }

                .info-status {
                    font-size: 24px;
                    line-height: 36px;
                    font-family: SourceHanSansCN, SourceHanSansCN;

                    .stu1 {
                        color: #C52026;
                    }

                    .stu2 {
                        color: #EAA60F;
                    }

                    .stu3 {
                        color: #397FF9;
                    }

                    .stu4 {
                        color: #666;

                        span {
                            color: #397FF9;

                        }
                    }
                }
            }

            .info-con {
                // display: flex;
                // flex-direction: column;
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 400;
                font-size: 26px;
                color: #5A4F4F;
                padding-top: 20px;

                .row {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    // min-height: 56px;
                    // line-height: 40px;
                    margin-bottom: 30px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .row-tit {
                        width: 132px;
                        display: inline-block;
                    }

                    .con-col {
                        width: calc(100% - 148px);
                        display: inline-block;
                        color: #7F8389;
                        // text-align: right;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
            }

            .item-ops {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .name {
                    color: #7F8389;
                    font-size: 26px;
                    line-height: 40px;
                }

                /deep/ .van-button {
                    background-color: #397FF9;
                    height: 44px;
                    font-size: 24px;
                }
            }
        }

        .item:last-child {
            margin-bottom: 20px;
        }
    }


}
</style>